<template>
  <div>
    <CloudButton type="primary" @click="showModal()">
      Open Modal with customized footer
    </CloudButton>
    <CloudModal
      :visible="visible"
      title="Title"
      okText="yes!!!"
      cancelText="no!!!"
      @ok="handleOk()"
      @cancel="handleCancel()"
    >
    </CloudModal>
  </div>
</template>
<script>
export default {
  title: '3.自定义页脚',
  data() {
    return {
      loading: false,
      visible: false
    }
  },
  methods: {
    showModal() {
      this.visible = true
    },
    handleOk() {
      this.loading = true
      setTimeout(() => {
        this.visible = false
        this.loading = false
      }, 3000)
    },
    handleCancel() {
      this.visible = false
    }
  }
}
</script>